<template>
	<div>
	    <el-form  ref="form">
	      <div class="content-commit">
	        	<div class="complate_box">
              <!--认证中-->
              <div class="success-info" v-if="authStatus==1"> 
								<img src="/static/images/organize/waiting.png"/>
                <div class="compalte-info">
                  <div class="status">您的信息正在审核中，请耐心等待...</div> 
                  <p class="tips">您提交的信息我们将在3个工作日内完成</p>
                </div> 
                <el-form-item>
                  <a href='http://www.oooseed.com' target="_blank">
                    <el-button class="confirm-btn" type="primary" >确定</el-button>
                  </a>
                </el-form-item> 
	        		</div>
              <!--认证失败-->
	        		<div class="fail-info" v-if="authStatus==2">
								<img src="/static/images/organize/fail.png"/>
								<div class="compalte-info"> 
									<div class="status">很遗憾，你的信息未通过审核</div>
                  <p class="tips">失败原因：可能是企业信息不符合</p> 
								</div>
                <div class="btn-list">
                  <el-form-item>
                    <a href='http://www.oooseed.com' target="_blank">
                      <el-button>返回首页</el-button>
                    </a>
                    <router-link :to="authType==1?'/organize/state':'/organize/message/'+authCateId">
                      <el-button class="retry-btn" type="danger">重新认证</el-button>
                    </router-link>
                  </el-form-item>
                </div>
							</div>
              <!--认证成功-->
							<div class="success-info" v-if="authStatus==5">
								<img src="/static/images/organize/success.png"/>
                <div class="compalte-info">
                  <div class="status">信息提交完成，正在为你审核...</div> 
                  <p class="tips">您提交的信息我们将在3个工作日内完成</p>
                </div> 
                <el-form-item>
                    <a href='http://www.oooseed.com' target="_blank">
                      <el-button class="confirm-btn" type="primary">确定</el-button>
                    </a>
                </el-form-item> 
	        		</div>
	        	</div>
	      </div>
	    </el-form>
	 </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  props: {
    activeChange: {
      type: Function
    }
  },
  data () {
    return {
      authStatus: '',
      authCateId: '',
      authType: ''
    }
  },
  created () {
    this.activeChange(5)
    window.addEventListener('load', () => {
      this.$store.dispatch('organize_info')
    })
    if (this.update_url.params) {
      this.authStatus = 5
    } else {
      this.$store.dispatch('organize_info')
    }
    window.scrollTop = document.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = 0
  },
  computed: {
    ...mapGetters({
      organize_info: 'organize_info',
      update_url: 'update_url'
    })
  },
  watch: {
    organize_info (value) {
      this.authStatus = value.authStatus
      this.authType = value.authType
      this.authCateId = value.authCateId
      if (value.authStatus === 3) {
        // this.$router.push('/settings')
        location.href = `/?${Math.random().toString(36).substr(2)}#/login` // 跳至登陆页面
      }
    }
  }
}
</script>

<style scoped>
.content-commit {
  min-height:680px
}

.complate_box {
	margin-top: 220px;
  font-size: 0;
  text-align: center;
}

.compalte-info {
	display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 20px;
}

.compalte-info .status {
	font-size: 20px;
  margin-bottom: 20px;
}

.success-info img {
	width: 70px;
  height: 70px;
  vertical-align: middle;
}

.compalte-info .tips {
	font-size: 14px;
	color: #999;
	text-align: left;
}
.btn-list{
  margin: 60px auto 0;
}
.retry-btn {
  margin-left:20px
}

.confirm-btn{
	width: 110px;
  height: 40px;
  cursor: pointer;
  text-align: center;
  margin: 60px auto 0;
}
</style>
